const path = require("path"); // 路径包
// 打包时自动拷贝页面到输出目录 使用插件html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 打包时自动将JavaScript中引入的css文件提取到独立的css文件中
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// webpack: 作用是打包、合并、压缩、转译 js、scss、css...
// webpack 打包过程:
// 从入口文件开始读取, 查找引入的所有文件, 构建依赖树,
// 查找到所有文件之后, 开始打包、合并、压缩...
// 最终输出成一个或者多个js文件

// webpack的配置文件， 运行webpack时会自动读取此文件
module.exports = {
  // 打包文件的前后对应关系
  devtool: "source-map",
  // 打包模式
  mode: "development", // development: 开发模式, 方便调试代码 or production: 生产模式, 压缩优化代码
  // 入口文件：webpack从哪个文件开始处理
  // 如果入口文件是数组, 则会把多个入口文件合并成一个文件
  // 例如: entry: ['./src/index.js', './src/detail.js', './src/search.js']
  // 多个入口时, 使用对象
  entry: {
    index: "./src/index/index.js",
    detail: "./src/detail/detail.js",
    search: "./src/search/search.js",
  },
  // 出口
  output: {
    // 输出的目录
    path: path.join(__dirname, "./dist"),
    // 输出的文件名称
    filename: "[name].js",
  },
  // 插件: 扩展webpack的功能, 给webpack增加额外的功能
  plugins: [
    // 打包时自动拷贝页面到输出目录, 并且配置引用打包后的js文件
    new HtmlWebpackPlugin({
      template: "./src/index/index.html",
      filename: "index.html",
      chunks: ["index"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/detail/detail.html",
      filename: "detail.html",
      chunks: ["detail"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/search/search.html",
      filename: "search.html",
      chunks: ["search"],
    }),
    new MiniCssExtractPlugin(),
  ],
  // 配置loader, 允许webpack 处理其他格式的文件
  module: {
    // 配置loader
    rules: [
      {
        // 当解析到css | scss | sass 后缀的文件时使用此loader出处理
        test: /\.(css|scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader, // 将js中提取的css代码, 放入一个独立的css文件中
          "css-loader", // 解析css文件
          "sass-loader", // 解析sass文件
        ],
      },
      {
        // 处理图片格式的文件
        test: /\.(jpg|png|gif|webp|svg)$/,
        type: "asset", // 自动把小于 8kb 的图片转成 base64 格式
      },
      {
        // 处理html中的图片
        test: /\.html$/,
        use: ["html-loader"],
      },
      {
        // 通过 babel 把 es6+ 语法转译成低版本语法
        test: /\.js/,
        // 解析时排除 node_modules 中的文件
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  devServer: {
    port: 25041,
    open: true,
    proxy: [
      {
        context: ["/bw"],
        target: "http://121.89.213.194:5001",
        pathRewrite: { "^/bw": "" },
      },
    ],
  },
  resolve: {
    // 配置路径别名
    alias: {
      "@": path.join(__dirname, "./src"),
    },
  },
};
// console.log(path.join(__dirname, './src'))
